Axios 파일 다운로드

Axios 를 통해서 파일 다운로드 하기.

 

//response blob or arraybuffer

this.$axios({
  method: 'post',
  url: url,
  responseType: 'blob',
  data: paramter
}).then(res => {
	//header content-disposition에서 filename 추출.
    const name = res.headers['content-disposition'].split('filename=')[1]
    
    //IE11에서 blob처리 오류로 인해 분기처리
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      const blob = res.data
      window.navigator.msSaveOrOpenBlob(blob, name)
    } else {
    	//IE 이외 다운로드 처리
      const url = window.URL.createObjectURL(new Blob([res.data], { type: res.headers['content-type'] }))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', name)
      document.body.appendChild(link)
      link.click()
      delete link;
    }
}).catch(error => {
	//error
})

 

axios에서 blob (블롭) 을 이용하여 파일다운로드 구현 할 수 있다.

blob은 IE10 이상에서 지원된다.

developer.mozilla.org/ko/docs/Web/API/Blob

Blob - Web API | MDN

※ reseponse.header에서 Content-Disposition 객체를 찾을 수 없을 떄.

CORS 때문에 헤더에 Contents-Disposition내 filename이 있어도 값을 사용할 수 없을 수 있다.

해당의 경우 서버에서 allow-content-expose-headers 를 추가하여 사용할 수 있다.

 

//php
header('Access-Control-Expose-Headers: Content-Disposition');

//java
@RestController
@RequestMapping("/api/files")
@CrossOrigin(value = {"*"}, exposedHeaders = {"Content-Disposition"})
public class FileBoundary {
   // code ...
}

//node
app.use(cors({
  origin: 'http://localhost:8080',
  credentials: true,
  exposedHeaders: ['Content-Disposition']
}))

참조 : 1004lucifer.blogspot.com/2019/04/axios-response-headers-content.html

[Axios] Response Headers의 Content-Disposition 항목이 없는 이슈